<script setup>

import { Bottom, Delete, Top } from '@element-plus/icons-vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  items: {
    type: Array,
    required: true
  }
})
const dataList = defineModel("dataList",{type:Object})
const emit = defineEmits(['moveOneIndex', 'removeBtn'])
const updateDataList = (...val)=>{
  console.log(val)
}
</script>

<template>
  <el-collapse accordion style="background-color:#121212;margin-bottom: 10px">
    <div class="collapse-title">{{title}}</div>
    <el-collapse-item :title="item" :name="item" v-for="(item,index) in items">
      <el-form-item v-for="param in dataList[item].params" :key="param.name" :label="param.label">
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="param.description"
          placement="top"
        >
          <el-input-number v-if="param.type==='number'" :name="param.name"
                           v-model="param.defaultValue"
                           :step="param.step" />
          <el-select v-else="param.type === 'select'"
                     v-model="param.defaultValue"
                     style="width: 200px">
            <el-option
              v-for="item in param.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-tooltip>
      </el-form-item>
      <el-button type="primary" :icon="Top" circle @click="emit('moveOneIndex',items,index,-1)"></el-button>
      <el-button type="danger" :icon="Delete" circle @click="emit('removeBtn',items,index)"
                 style="margin-top: 3px"></el-button>
      <el-button type="primary" :icon="Bottom" circle @click="emit('moveOneIndex',items,index,1)"></el-button>
    </el-collapse-item>
  </el-collapse>
</template>

<style  lang="scss">
  .el-collapse {
    width: 100%;

    .collapse-title {
      background-color: white;
      font-weight: bold;
      font-size: 20px;
      text-align: center;
    }

    .el-collapse-item__content {
      text-align: center;

      .el-form-item {
        width: 120px;
        margin: 0 auto 10px;
      }
    }
  }
</style>
